<template>
    <div style="width: 100%;margin: 10px auto;">
        <div class="operation" >
        <el-row type="flex" class="row-bg" justify="start">
            <el-input placeholder="请输入检查项名名" prefix-icon="el-icon-search" clearable @clear="initData" style="width: 450px;margin-right: 10px" v-model="keyword" @keydown.enter.native="search"></el-input>
            <el-button icon="el-icon-search" type="primary" @click="search">
                搜索
            </el-button>
            <el-col >
                <el-button type="primary" icon="el-icon-plus"  @click="addDepAction">
                    添加检查项目</el-button>
            </el-col>
        </el-row>
        </div>
        <el-table
                :header-cell-style="{background:'#c3e0cd',color:'#606266'}"
                :fit="true"
                :data="project"
                border
                style="margin: 15px;">
            <el-table-column
                    type="selection"
                    >
            </el-table-column>
            <el-table-column
                    fixed
                    prop="id"
                    label="项目id"
                    min-width="80"
                    >
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="项目名称"
                    min-width="80">
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="检查费用"
                    min-width="80">
            </el-table-column>
            <el-table-column
                    prop="departmentName"
                    label="所属科室"
                    min-width="80">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    min-width="170">
                <template slot-scope="scope">
                    <el-button @click="deleteClick(scope.row)" type="danger" round size="small">删除</el-button>
                    <el-button @click="editData(scope.row)" type="primary" round size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%">
            <el-form :model="form" :rules="rules">
                <el-form-item label="检查名称" :label-width="formLabelWidth" prop="name" >
                    <el-input v-model="form.name" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="检查价格" :label-width="formLabelWidth" prop="price">
                    <el-input v-model="form.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所属科室" :label-width="formLabelWidth">
                    <el-select v-model="form.departmentName" :placeholder="form.departmentName">
                        <el-option v-for = "item in departments" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="pushData">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog
                title="提示"
                :visible.sync="editDialogVisible"
                width="30%">
            <el-form :model="form" :rules="rules">
                <el-form-item label="检查项目id" :label-width="formLabelWidth"  >
                    <el-input v-model="form.id" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="检查名称" :label-width="formLabelWidth" prop="name" >
                    <el-input v-model="form.name" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="检查价格" :label-width="formLabelWidth" prop="price">
                    <el-input v-model="form.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所属科室" :label-width="formLabelWidth">
                    <el-select v-model="form.departmentName" :placeholder="form.departmentName">
                        <el-option v-for = "item in departments" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="clearForm">取 消</el-button>
                <el-button type="primary" @click="pushEditData">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import MY from '../../global_variable'
    export default {
        name: "Project",
        data() {
            return {
                keyword: '',
                dialogVisible: false,
                editDialogVisible: false,

                project: [],
                form: {
                    id:'',
                    name: '',
                    price: '',
                    departmentName: ''
                },

                rules: {
                    price: [
                        {required: true, message: '请输入浮点数且小数点只能两位', trigger: 'blur'},
                        {validator: this.isPriceVlidator, trigger: 'blur'}
                    ],
                },
                departments: [],
                formLabelWidth: '120px',
                total: 0,
                currentPage: 1,
                pageSize: 5,
                projects:[]
            }
        },
        mounted() {
            this.initData()
        },
        methods: {
            handleSizeChange: function (size) {
                this.pageSize = size;
                console.log(this.pageSize)  //每页下拉显示数据
                if(this.keyword!=''){
                    this.search()
                }else{
                    this.pageRequest(1,this.pageSize)
                }

            },
            handleCurrentChange: function(currentPage){

                this.currentPage = currentPage;
                if(this.keyword!=''){
                    this.search()
                }else{
                    this.pageRequest(currentPage,this.pageSize)
                }
                console.log(this.currentPage)  //点击第几页
            },
            pageRequest(start, size) {
                var pn = {
                    pageNum: start,
                    pageSize: size
                }
                this.getRequest(MY.myURL + '/project/getProjectByPage', pn).then(resp => {
                    console.log('分页')
                    console.log(resp)
                    if (resp) {
                        this.project = resp.data.data.records
                        this.total = resp.data.data.total
                        this.currentPage=pn.pageNum
                    }
                })

            },
            search() {
                var pn={
                    name:this.keyword
                }
                this.getRequest(MY.myURL+'/project/fuzzyQueryByProjectName',pn).then(resp=>{
                    console.log(resp)
                    if(resp.data.code=='4010'){
                        this.projects=resp.data.data
                        this.total=this.projects.length
                        let begin=0
                        let end=0
                        if(Math.ceil(this.total/this.pageSize)<this.currentPage){
                            begin=0
                            end=this.pageSize
                            this.currentPage=1
                        }else{
                            begin=(this.currentPage-1)*this.pageSize
                            end=(this.currentPage*this.pageSize)
                        }
                        this.project=this.projects.slice(begin,end)

                    }
                })

            },
            addDepAction() {
                this.dialogVisible = true
                this.clearForm()
                this.getRequest(MY.myURL + '/department/getDepartments').then(resp => {
                    console.log(resp.data.code == '4010')
                    if (resp.data.code == '4010') {
                        this.departments = resp.data.data
                    }
                })
            },
            pushData() {
                console.log(this.form)
                if (this.form.departmentName == '') {
                    this.$message({
                        message: '该检查项目的所属科室不能为空',
                        type: 'error'
                    });
                } else {
                    this.getRequest(MY.myURL + '/project/insertProject', this.form).then(resp => {
                        if (resp.data.code == '4001') {
                            this.$message({
                                message: resp.data.message,
                                type: 'success'
                            });
                            this.clearForm()
                            this.dialogVisible = false
                            //this.refreshData()
                            if(this.keyword!=''){
                                this.search();
                            }else{
                                this.pageRequest(Math.ceil((this.total+1)/this.pageSize),this.pageSize)

                            }
                        }
                    })
                }

            },
            deleteClick(row) {
                console.log(row.name)
                var path = MY.myURL + '/project/deleteOneProject'
                this.$confirm('此操作将永久删除检查项为 '+row.id+'的数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var pn={
                        id:row.id
                    }
                    this.getRequest(path,pn).then(resp => {
                        if (resp.data.code == '4005') {
                            this.$message({
                                type: 'success',
                                message: resp.data.message
                            });
                            if(this.project.length==1){
                                this.pageRequest(this.currentPage-1,this.pageSize)

                            }else{
                                this.pageRequest(this.currentPage,this.pageSize)
                            }
                        } else {
                            this.$message({
                                type: 'error',
                                message: "该检查项已有病人关联，暂不能删除"
                            });
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
            editData(row) {
                this.editDialogVisible=true
                this.getRequest(MY.myURL + '/department/getDepartments').then(resp => {
                    console.log(resp.data.code == '4010')
                    if (resp.data.code == '4010') {
                        this.departments = resp.data.data
                    }
                })
                console.log('编辑')
                console.log(row)
                this.initForm(row)
            },
            pushEditData(){
                this.getRequest(MY.myURL+'/project/updateProject',this.form).then(resp=>{
                    console.log('更新检查项目信息')
                    console.log(resp)
                    if(resp.data.code=='4009'){
                        this.$message({
                            message: resp.data.message,
                            type: 'success'
                        });
                        this.clearForm()
                        this.pageRequest(this.currentPage,this.pageSize)

                        this.keyword=''
                    }else{
                        this.$message.error(resp.data.message);
                        this.editDialogVisible=false
                    }
                })
            },
            initData() {
                this.pageRequest(1, 5)
            },
            initForm(row) {
                this.form.id=row.id
                this.form.name = row.name
                this.form.price = row.price
                this.form.departmentName = row.departmentName
            },
            refreshData(){
                this.initData()
            },
            clearForm() {
                this.form.id=''
                this.form.departmentName = ''
                this.form.name = ''
                this.form.price = ''
                this.editDialogVisible=false
            },
            isPriceVlidator(rule, value, callback){
                var pattern = /^[+]?((0|([1-9]\d*))\.\d+)?$/

                if (!pattern.test(value)) {
                    return callback(new Error('请输入浮点数'))
                }
                else return callback()
            },


        }
    }
</script>

<style scoped>

</style>
